{% extends "base.html" %} {% block title %}访问权限控制{% endblock %} {% block head %}
<link href="static/plugins/iCheck/minimal/blue.css" rel="stylesheet">
<script src="static/plugins/iCheck/icheck.js"></script>
<script src="static/js/bootstrap-notify.js"></script>
<style>
    #panel_part ul {
        background-color: #;
    }

    #panel_part p {
        background-color: #1C4257;
        color: #66F4DF;
    }
</style>

{% endblock %} {% block contentheader %}访问权限控制{% endblock %} {% block contentsmallheader %}根据LDAP用户所在组(cn)更改其对Portal访问控制{%
endblock %} {% block content %}
<div class="row">
    <div class="col-md-3">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title fa fa-group"> LDAP组(cn)</h3>
                <div class="box-tools">
                    <button type="button" class="btn btn-box-tool " data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                </div>
            </div>
            <div class="box-body no-padding" style="display: block;">
                <ul class="nav nav-pills nav-stacked" id="cn_list">
                </ul>
            </div>
        </div>
    </div>
    <div class="box-body" <div class="col-md-9">
        <div class="panel panel-default" id="panel_cndetail">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <span id="cn_header">选择的组：</span>
                <div class="pull-right">
                    <input tabindex="all" type="checkbox" id="input-all">
                    <label for="input-all">全选</label>
                </div>
            </div>
            <div class="panel-body" id="panel_part">
                <div class="row">
                    <div class="col-md-3">
                        <ul id="part1" style="list-style-type:none;text-align: left">
                            <p>
                                数据架构
                            </p>
                            <li>
                                <input tabindex="1.1" type="checkbox" id="input-1.1">
                                <label for="input-1.1">数据收集</label>
                            </li>
                            <li>
                                <input tabindex="1.2" type="checkbox" id="input-1.2">
                                <label for="input-1.2">数据存储</label>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-3">
                        <ul id="part2" style="list-style-type:none;">
                            <p>
                                元数据管理
                            </p>
                            <li>
                                <input tabindex="2.1" type="checkbox" id="input-2.1">
                                <label for="input-2.1">数据编码</label>
                            </li>
                            <li>
                                <input tabindex="2.2" type="checkbox" id="input-2.2">
                                <label for="input-2.2">数据字典</label>
                            </li>
                            <li>
                                <input tabindex="2.3" type="checkbox" id="input-2.3">
                                <label for="input-2.3">数据血缘</label>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-3">
                        <ul id="part3" style="list-style-type:none;">
                            <p>
                                数据查询
                            </p>
                            <li>
                                <input tabindex="3.1" type="checkbox" id="input-3.1">
                                <label for="input-3.1">Hive & HBase</label>
                            </li>
                            <li>
                                <input tabindex="3.2" type="checkbox" id="input-3.2">
                                <label for="input-3.2">HDFS</label>
                            </li>
                            <li>
                                <input tabindex="3.3" type="checkbox" id="input-3.3">
                                <label for="input-3.3">Kafka</label>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-3">
                        <ul id="part4" style="list-style-type:none;">
                            <p>
                                集群监控
                            </p>
                            <li>
                                <input tabindex="4.1" type="checkbox" id="input-4.1">
                                <label for="input-4.1">Oozie</label>
                            </li>
                            <li>
                                <input tabindex="4.2" type="checkbox" id="input-4.2">
                                <label for="input-4.2">Kettle</label>
                            </li>
                            <li>
                                <input tabindex="4.3" type="checkbox" id="input-4.3">
                                <label for="input-4.3">PPD数据同步</label>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-3">
                        <ul id="part5" style="list-style-type:none;">
                            <p>
                                数据报表
                            </p>
                            <li>
                                <input tabindex="5.1" type="checkbox" id="input-5.1">
                                <label for="input-5.1">Oozie</label>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <button class="btn btn-primary center-block " data-target="" id="save">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} {% block script %}
<script>
    function add_class() {
    }
    $(document).ready(function () {
        $('#panel_cndetail input').iCheck({
            checkboxClass: 'icheckbox_minimal-blue'
        });
    });
    $('#panel_cndetail').hide();
    $.ajax({
        url: "/get_cn_details", success: function (data) {
            for (var key in data.data) {
                $("#cn_list").append("<li id='" + key + "' data-target='" + data.data[key][0] + "'><a href='#'><i class='fa fa-group'></i> " + key + "<span class='label label-primary pull-right'>(" + data.data[key][1] + ")</span></a></li>")
            }
        }
    });
    $('#cn_list').on('click', 'li', function () {
        $('#save').attr('data-target', $(this).attr('id'));
        $('#cn_header').html("组<b>" + $(this).text() + " </b>的权限详情：");
        $('#panel_cndetail input').iCheck('uncheck');
        var details = $(this).attr('data-target').split(',');
        if (details[0] == 'all') {
            $('#panel_cndetail input').iCheck('check');
        }
        else {
            for (var j = 0; j < details.length; j++) {
                if (details[j].indexOf(".") > 0) {
                    $("#input-" + details[j].replace('.', '\\.')).iCheck('check');
                }
            }
        }
        $('#panel_cndetail').show();
    });
    
    $('#input-all').on('ifChecked', function (event) {
        $('#panel_cndetail input').iCheck('check');
    });
    $('#input-all').on('ifUnchecked', function (event) {
        $('#panel_cndetail input').iCheck('uncheck');
    });
    $('#save').on('click', function () {
        if ($('#input-all').is(":checked")) {
            $.ajax({
                data: { cn: $(this).attr('data-target'), scope: 'all' },
                url: "/update_scope", success: function (data) {
                    if (data == '0')
                        alert('update error!');
                    else {
                        $('#' + $('#save').attr('data-target')).attr('data-target', 'all');
                    }
                }
            });
        } else {
            var checked_scope = new Array();
            $("#panel_cndetail input:checked").each(function () {
                if ($.inArray(parseInt($(this).attr('tabindex')), checked_scope) < 0) {
                    checked_scope.push(parseInt($(this).attr('tabindex')));
                }
                checked_scope.push($(this).attr('tabindex'));
            });
            $.ajax({
                data: { cn: $(this).attr('data-target'), scope: checked_scope.toString() },
                url: "/update_scope", success: function (data) {
                    if (data == '0')
                        alert('update error!');
                    else {
                        $('#' + $('#save').attr('data-target')).attr('data-target', checked_scope.toString());
                    }
                }
            });
        }
    });

</script>
{% endblock %}